<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">

      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <!-- setDataList 用于修改过滤后的数组列表 -->
        <div>
          <flightsFilters :data="cacheFlightsData"
            @setDataList = "setDataList"
          />
        </div>

        <!-- 航班头部布局 -->
        <div>
          <FlightsListHead />
        </div>


        <!-- 航班信息 -->
        <div>
          <flightsItem v-for="(item,index) in dataList" :key='index' :data='item' />

          <!-- 分页 -->
          <el-row type="flex" justify="center" style="margin-top:10px;">
            <!-- size-change：切换条数时候触发 -->
            <!-- current-change：选择页数时候触发 -->
            <!-- current-page: 当前页数 -->
            <!-- page-size：当前条数 -->
            <!-- total：总条数 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"
              :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
              :total="flightsData.total">
            </el-pagination>
          </el-row>
        </div>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 侧边栏组件 -->
        <flightsAside  />
      </div>
    </el-row>
  </section>
</template>

<script>
  import FlightsListHead from "@/components/air/flightsListHead.vue"
  import flightsItem from "@/components/air/flightsItem.vue"
  import moment from "moment";
  import flightsFilters from "@/components/air/flightsFilters.vue"
  import flightsAside from "@/components/air/flightsAside.vue"
  export default {
    components: {
      FlightsListHead,
      flightsItem,
      flightsFilters,
      flightsAside
    },
    data() {
      return {
        flightsData: {
          flights:[],
          info:{},
          options:{}
        }, //航班总数据
        dataList: [], //航班列表信息
        pageIndex: 1,
        pageSize: 5,
        //缓存一份数据
       cacheFlightsData:{
         flights:[],
         info:{},
         options:{}
         }
      }
    },

    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        this.$axios({
          url: 'airs',
          params: this.$route.query //来自url的参数
        }).then(res => {
          this.flightsData = res.data;
          this.dataList = this.flightsData.flights
          // console.log(this.dataList);


          // 缓存一份新的列表 这样不会收原来的列表的影响
          this.cacheFlightsData = {...res.data}
          this.setDataList()
        })
      },


       // 设置dataList数据
       setDataList(arr){
      if(arr){
        this.pageIndex = 1;
        this.flightsData.flights = arr;
        this.flightsData.total = arr.length;
      }
       const start = (this.pageIndex - 1) * this.pageSize;
                  const end = start + this.pageSize;
                  this.dataList = this.flightsData.flights.slice(start, end);
       },



      handleSizeChange(val) {
         // 修改当前的页面
        this.pageIndex = val
      },
      handleCurrentChange(val) {
        // 得到当前分页要渲染的数组
        this.dataList=this.flightsData.flights.slice(
          (val-1) *this.pageSize,
          val * this.pageSize
        )
      },
    },
    watch:{
      $route(){
        this.getData()
      }
    }
  }
</script>

<style scoped lang="less">
  .contianer {
    width: 1000px;
    margin: 20px auto;
  }

  .flights-content {
    width: 745px;
    font-size: 14px;
  }

  .aside {
    width: 240px;
  }
</style>
